<template>
    <div>
        <h2 v-text="msg" ref="title"></h2>
        <!-- 编写组件标签 -->
        <School ref="sch"></School>

        <!-- 编写组件标签 -->
        <Student></Student>
        <button ref="btn" @click="showDOM">点击我输出上面的DOM元素</button>
    </div>
</template>

<script>
    //引入School组件
    import School from './components/School.vue'

    //引入Student组件
    import Student from './components/Student.vue'
    export default {
        name: 'App',
        //注册组件
        components:{
            School,
            Student
        },
        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },
        methods:{
            showDOM(){
                console.log(this);
                console.log(this.$refs.title);//真实的DOM元素
                console.log(this.$refs.sch);//真实的DOM元素
                console.log(this.$refs.btn);//School组件的实例对象(vc)
            }
        }
    }
</script>

<style>

</style>